import { FormItemType } from '@/constants/layout';
import { useDictOptions } from '@/hooks';
import { DownOutlined, SearchOutlined, UpOutlined, RedoOutlined } from '@ant-design/icons';
import { Button, Col, DatePicker, Form, Input, Row, Select, Space } from 'antd';
import dayjs from 'dayjs';
import PropTypes from 'prop-types';
import React, { forwardRef, useImperativeHandle, useState } from 'react';

const { RangePicker } = DatePicker;
const { Item } = Form;

// export interface SearchItem {
//   name: string;
//   label: string;
//   type: keyof typeof FormItemType;
// }

// interface Props {
//   items: PropTypes.array.isRequired,
//   onSearch: PropTypes.func.isRequired,
//   searchContent: PropTypes.string,
//   autoSearch: PropTypes.bool,
//   expand: PropTypes.bool,
//   onExpand: PropTypes.func,
//   onReset: PropTypes.func,
//   onValuesChange: PropTypes.func,
//   formRef: PropTypes.object,
//   form: PropTypes.object,
//   onFinish: PropTypes.func,
//   buttons: PropTypes.node,
// }

const LABEL_COL = { style: { width: 'auto' } };

const SearchForm = forwardRef((props, ref) => {

  const { items, onSearch, onReset, showReset = true, onExpand, onValuesChange, formRef: withForm, onFinish, buttons, searchContent } = props;
  const [formRef] = withForm ? [withForm] : Form.useForm();
  const [expand, setExpand] = useState(true);

  const setDefaultParams = () => {
    formRef.resetFields();
    onSearch({});
  };

  useImperativeHandle(ref, () => ({
    resetDefaultSearchObj: () => {
      // setDefaultParams();
    },
  }));

  const handleSearch = () => {
    const values = formRef.getFieldsValue();
    onSearch(values);
  };

  const handleReset = () => {
    formRef.resetFields();
    onSearch({});
  }

  const renderItem = (item) => {
    const { name, label, type, fieldProps = {} } = item;
    const { data: options } = item.dictType ? useDictOptions(item.dictType) : {}
    let fieldStyle = {
      width: 200,
    }
    if (type === FormItemType.INPUT) {
      return (
        <Item name={name} label={label} labelCol={LABEL_COL}>
          <Input style={fieldStyle} allowClear placeholder={label} {...fieldProps} />
        </Item>
      );
    }
    if (type === FormItemType.SELECT) {
      return (
        <Item name={name} label={label} labelCol={LABEL_COL}>
          <Select style={fieldStyle} allowClear placeholder={label} options={options} {...fieldProps} />
        </Item>
      );
    }
    if (type === FormItemType.RANGE_PICKER) {
      return (
        <Item name={name}
          label={label}
          labelCol={LABEL_COL}
          getValueProps={(value) => ({
            value: value && value.map(d => dayjs(d))
          })}
          normalize={
            (value) => {
              return value && value.map(d => dayjs(d).format("YYYY-MM-DD"))
            }
          }
        >
          <RangePicker allowClear {...fieldProps} />
        </Item>
      );
    }
    return null;
  };

  return (
    <Form form={formRef} className="search-form">
      {expand && (
        <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
          {items.map((item) => {
            return <React.Fragment key={item.name}>{renderItem(item)}</React.Fragment>;
          })}
          <Item className='search-buttons'>
            <Space>
              <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>
                {searchContent || '搜索'}
              </Button>

              {showReset && <Button icon={<RedoOutlined />} onClick={handleReset}>重置</Button>}

              {buttons}
              {/* <a
                style={{ fontSize: 12 }}
                onClick={() => {
                  setExpand(!expand);
                }}
              >
                {expand ? <UpOutlined /> : <DownOutlined />}
                {expand ? ' 隐藏搜索' : ' 展开搜索'}
              </a> */}
            </Space>
          </Item>
        </div>
      )}
    </Form>
  );
})

SearchForm.propTypes = {
  items: PropTypes.array.isRequired,
  onSearch: PropTypes.func.isRequired,
  searchContent: PropTypes.string,
  autoSearch: PropTypes.bool,
  expand: PropTypes.bool,
  onExpand: PropTypes.func,
  onReset: PropTypes.func,
  showReset: PropTypes.bool,
  onValuesChange: PropTypes.func,
  formRef: PropTypes.object,
  form: PropTypes.object,
  onFinish: PropTypes.func,
  buttons: PropTypes.node,
}

export default SearchForm;
